<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
			position: relative;
			left: 0px;
		}

	</style>

	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>


	<script type="text/javascript">
		$(function  () {

			// $('#btn').click(function(event) {
			// 	$('.box').slideToggle();
			// });

			// $('#btn').hover(function() {
			// 	$('.box').slideToggle();
			// }, function() {
			// 	$('.box').slideToggle();
			// });
			// 
			// 
			$('#btn').click(function(event) {
				$('.box').animate({'width': "400px", 'height': "400px",'left':'600px'}, 1000);
			});



			
			// $('.box').click(function(event) {
			// 	$(this)
			// });

		})
	</script>
</head>
<body>
	<input class="btn" id="btn" type="button" value="点我吧">
	<div id="father" xbs='xbs111111' class="box">
		学并思
	</div>

</body>
</html>